.carousel_container{
    position: relative;
    overflow: hidden;
}

.image{
    width: 100%;
    height: 100%;
}

.director_left_container,
.director_right_container{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    transition: all 0.3s;

    &:hover{
        cursor: pointer;
        opacity: 0.7;
    }
}

.dot_container{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;

    .dot_container_item{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .active{
        filter: invert(30%);
    }

    .ract {
        width: 50px;
        height: 3px;
        border-radius: 0;
        align-items: flex-end;
        &.active{
            filter: invert(30%);
        }
    }
}

.carousel_item_container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 49px;
}

.next-enter-active,
.next-leave-active {
    transition: all 0.5s;
}

.next-enter-active {
    transform: translateX(100%);
}

.next-enter-to{
    transform: translateX(0);
}

.next-leave-active{
    transform: translateX(0);
}

.next-leave-to{
    transform: translateX(-100%);
}

// ----------------------------------------

.prev-enter-active,
.prev-leave-active {
     transition: all 0.5s;
}

.prev-enter-active {
    transform: translateX(-100%);
}

.prev-enter-to{
    transform: translateX(0);
}

.prev-leave-active{
    transform: translateX(0);
}

.prev-leave-to{
    transform: translateX(100%);
}